<template>
  <div id="container">
    <!-- <canvas-box :graphData="graphData" :currentNode="currentNode"></canvas-box> -->
  </div>
</template>

<script>
// import CanvasBox from '@/components/graph/index.vue';
// import { company } from '@/components/graph/company';
export default {
  name: 'Demo',
  components: {
    // CanvasBox,
  },
  data() {
    return {
      graphData: {},
      centerNode: {},
      currentNode: [],
    };
  },
  created() {
    // this.graphData = this.handleData(company);
  },
  methods: {
    /**
     * 处理数据
     * @date 2021-08-02
     * @param {Object} data
     * @returns {Object}
     */
    handleData(data) {
      const obj = {
        nodes: [],
        links: [],
      };
      const nodes = data.nodes;
      nodes.forEach(item => {
        if (item.label === '总公司') {
          const nodeObj = {
            id: item.id,
            label: item.label,
            properties: item,
            color: '38,186,191',
            selectedBorderColor: '131,218,228',
            shadowColor: '131,218,228',
          };
          nodeObj.size = 80;
          nodeObj.x = 250;
          nodeObj.y = 250;
          this.centerNode = nodeObj;
          this.currentNode.push(item.id);
        } else {
          const nodeObj = {
            id: item.id,
            label: item.label,
            properties: item,
            size: 60,
          };
          switch (item.type) {
            case 1:
              nodeObj.color = '242,105,97';
              nodeObj.selectedBorderColor = '249,179,157';
              nodeObj.shadowColor = '249,179,157';
              break;
          }
          obj.nodes.push(nodeObj);
        }
      });
      const links = data.edges;
      links.forEach(item => {
        const linkObj = {
          id: item.id,
          target: item.to,
          source: item.from,
          label: item.label,
          properties: item,
          // strokeColor: this.getRandomColor()
        };
        switch (item.type) {
          case 11:
            linkObj.color = '40,194,199';
            linkObj.selectedColor = '40,194,199';
            linkObj.shadowColor = '40,194,199';
            break;
          case 12:
            linkObj.color = '250,108,100';
            linkObj.selectedColor = '250,108,100';
            linkObj.shadowColor = '250,108,100';
            break;
          case 13:
            linkObj.color = '0,132,255';
            linkObj.selectedColor = '0,132,255';
            linkObj.shadowColor = '0,132,255';
            break;
          case 15:
            linkObj.color = '250,108,100';
            linkObj.selectedColor = '250,108,100';
            linkObj.shadowColor = '250,108,100';
            break;
        }
        obj.links.push(linkObj);
      });
      const nodeCount = obj.nodes.length;
      const xyArr = this.getXY(this.centerNode, nodeCount, nodeCount * 20);
      obj.nodes.forEach((n, i) => {
        n.x = xyArr[i].x;
        n.y = xyArr[i].y;
        n.size = 60;
      });
      obj.nodes.push(this.centerNode);
      return obj;
    },
    /**
     * 遍布选中节点周围的点坐标
     * @date 2021-07-23
     * @param {中心节点} centerNode
     * @param {节点数量} nodeCount
     * @param {距离中心点距离} raduis
     * @returns {Array}
     */
    getXY(centerNode, nodeCount, raduis) {
      const aop = 360.0 / nodeCount;
      const arr = [];
      for (let i = 0; i < nodeCount; i++) {
        let r1 = raduis;
        if (nodeCount > 10) {
          r1 = i % 2 === 0 ? raduis + 35 : raduis - 35;
        }
        const ao = i * aop;
        const o1 = {};
        o1.x = centerNode.x + r1 * Math.cos((ao * Math.PI) / 180);
        o1.y = centerNode.y + r1 * Math.sin((ao * Math.PI) / 180);
        arr[i] = o1;
      }
      return arr;
    },
  },
};
</script>
